<template>
	<view class="box">
		<Title name="莫小子" top="40"></Title>
		
		<view class="content">
			<view class="item heorshe">
				<view class="time">10:00</view>
				<view class="talkWrap">
					<image src="../../static/logo.png" mode=""></image>
					<view class="talkInfo">
						<text>
							咱俩是一个社团的，以后可以一块去活动吗 少时诵诗书所所所所所所所所所所所所所所所所所所所所所所
						</text>
					</view>
				</view>
			</view>
			
			<view class="item heorshe">
				<view class="time">10:00</view>
				<view class="talkWrap">
					<image src="../../static/logo.png" mode=""></image>
					<view class="talkInfo">
						<text>
							咱俩是一个社团的，以后可以一块去活动吗 少时诵诗书所所所所所所所所所所所所所所所所所所所所所所
						</text>
					</view>
				</view>
			</view>
			
			<view class="item heorshe">
				<view class="time">10:00</view>
				<view class="talkWrap">
					<image src="../../static/logo.png" mode=""></image>
					<view class="talkInfo">
						<text>
							咱俩是一个社团的，以后可以一块去活动吗 少时诵诗书所所所所所所所所所所所所所所所所所所所所所所
						</text>
					</view>
				</view>
			</view>
			
			<view class="item me">
				<view class="time">10:00</view>
				<view class="talkWrap">
					<view class="talkInfo">
						<text>
							咱俩是一个社团的，以后可以一块去活动吗 少时诵诗书所所所所所所所所所所所所所所所所所所所所所所
						</text>
					</view>
					
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		components: {Title},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #fff;
		min-height: 100vh;
		
		.content {
			padding: 0 18rpx;
			.item {
				.time {
					font-size: $smallFont;
					color: $subColor;
					text-align: center;
				}
				
				.talkWrap {
					display: flex;
					margin-top: $smallMargin;
					align-items: center;
					
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					
					.talkInfo {
						width: 362rpx;
						border-radius: 10px;
						background-color: rgba(92, 172, 238, 0.73);
						color: #fff;
						padding: 18rpx;
						font-size: $smallFont;
						
					}
				}
			}
			
			.heorshe {
				.talkInfo {
					margin-left: $smallMargin;
				}
			}
			
			.me {
				.talkWrap {
					justify-content: flex-end;
				}
				
				.talkInfo {
					margin-right: $smallMargin;
				}
			}
		}
	}
</style>
